<template>
  <div>
    <!-- 第一组 -->
    <newRadio
      :gqValue="1"
      @setSelect="setSelect"
      :dataField="dataField1"
      :caption="caption1"
    ></newRadio>
    <newRadio
      :gqValue="2"
      @setSelect="setSelect"
      :dataField="dataField1"
    ></newRadio>

    <!-- 第二组 -->
    <h3>第二组</h3>
    <newRadio
      :gqValue="1"
      @setSelect="setSelect"
      :dataField="dataField2"
    ></newRadio>
    <newRadio
      :gqValue="2"
      @setSelect="setSelect"
      :dataField="dataField2"
    ></newRadio>
    <newRadio
      :gqValue="3"
      @setSelect="setSelect"
      :dataField="dataField2"
    ></newRadio>
    <!-- 第三组 -->
    <h3>第三组</h3>
    <newRadio
      :gqValue="1"
      @setSelect="setSelect"
      :dataField="dataField3"
    ></newRadio>
    <newRadio
      :gqValue="2"
      @setSelect="setSelect"
      :dataField="dataField3"
    ></newRadio>
  </div>
</template>

<script>
import newRadio from "@/radioButton/radioButton.vue";
export default {
  components: {
    newRadio: newRadio,
  },
  data() {
    return {
      gqValue: 1,
      dataField1: "sex",
      dataField2: "sex2",
      dataField3: "sex3",
      caption1: "sys",
    };
  },
  methods: {
    setSelect(value) {
      console.log(value.dataField, "value");
      let all = document.querySelectorAll(
        `div[dataField='${value.dataField}']`
      );

      all.forEach((v, i) => {
        console.log(v.getAttribute("gqValue"), value.selectNum);
        console.log();
        if (v.getAttribute("gqValue") != value.selectNum) {
          console.log((v.children[0].style.background = "none"));
        } else {
          v.children[0].style.background = "#409eff";
        }
      });
      console.log(this.caption1);
      alert(value.gqValue);
    },
  },
};
</script>

<style lang="scss" scoped></style>
